// 初始化属性
let timer = null
var mapDataRender = []
var timeDate = 'map' + new Date().getTime()
var mapGeoJson
var center = {
  南京市: [118.767413, 32.041544],
  无锡市: [120.301663, 31.574729],
  徐州市: [117.184811, 34.261792],
  常州市: [119.946973, 31.772752],
  苏州市: [120.619585, 31.299379],
  南通市: [120.864608, 32.016212],
  连云港市: [119.178821, 34.600018],
  淮安市: [119.021265, 33.597506],
  盐城市: [120.139998, 33.377631],
  扬州市: [119.421003, 32.393159],
  镇江市: [119.452753, 32.204402],
  泰州市: [119.915176, 32.484882],
  宿迁市: [118.275162, 33.963008],
};
async function defineComponentProps() {
  const componentProps = {}
  option = {
    backgroundColor: '',
    // visualMap: {
    //   show: false,
    //   max: 100,
    //   seriesIndex: [3],
    //   inRange: {
    //     color: ["rgba(165,220,244,1)", "rgba(0,110,221,1)"],
    //   },
    // },
    geo: [
      {
        map: timeDate,
        roam: false, //是否允许缩放
        zoom: 1.1, //默认显示级别
        scaleLimit: {
          min: 0,
          max: 3,
        }, //缩放级别
        itemStyle: {
          normal: {
            areaColor: "#013C62",
            shadowColor: "#013C62",
            shadowBlur: 20,
            shadowOffsetX: -5,
            shadowOffsetY: 15,
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        z: 5,
        data: [],
        symbolSize: 14,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return (
                "{fline|地点：" +
                params.data.city +
                "}\n{tline|" +
                (params.data.info || "发生xx集件") +
                "}"
              );
            },
            position: "top",
            backgroundColor: "rgba(254,174,33,.8)",
            padding: [0, 0],
            borderRadius: 3,
            lineHeight: 32,
            color: "#f7fafb",
            rich: {
              fline: {
                padding: [0, 10, 10, 10],
                color: "#ffffff",
              },
              tline: {
                padding: [10, 10, 0, 10],
                color: "#ffffff",
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#feae21",
        },
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        z: 5,
        data: [],
        symbolSize: 14,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return (
                "{fline|地点：" +
                params.data.city +
                "}\n{tline|" +
                (params.data.info || "发生xx集件") +
                "}"
              );
            },
            position: "top",
            backgroundColor: "rgba(233,63,66,.9)",
            padding: [0, 0],
            borderRadius: 3,
            lineHeight: 32,
            color: "#ffffff",
            rich: {
              fline: {
                padding: [0, 10, 10, 10],
                color: "#ffffff",
              },
              tline: {
                padding: [10, 10, 0, 10],
                color: "#ffffff",
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#e93f42",
        },
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        z: 5,
        data: [],
        symbolSize: 14,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return (
                "{fline|地点：" +
                params.data.city +
                "}\n{tline|" +
                (params.data.info || "发生xx集件") +
                "}"
              );
            },
            position: "top",
            backgroundColor: "rgba(8,186,236,.9)",
            padding: [0, 0],
            borderRadius: 3,
            lineHeight: 32,
            color: "rgba(255,255,255,1)",
            rich: {
              fline: {
                padding: [0, 10, 10, 10],
                color: "#ffffff",
              },
              tline: {
                padding: [10, 10, 0, 10],
                color: "#ffffff",
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#08baec",
        },
      },
      //地图
      {
        type: "map",
        mapType: timeDate,
        geoIndex: -1,
        zoom: 1.1, //默认显示级别
        label: {
          show: true,
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          emphasis: {
            color: "white",
            show: false,
          },
        },
        itemStyle: {
          normal: {
            borderColor: "#2980b9",
            borderWidth: 1,
            areaColor: "rgba(14,149,241,1)",
          },
          emphasis: {
            areaColor: "#FA8C16",
            borderWidth: 0,
            color: "green",
          },
        },
        data: Object.keys(center).map((name) => {
          return {
            name: name,
            value: Math.random() * 100,
          };
        }),
      },
    ],
  };

  componentProps.options = option;


  // 返回组件属性 
  return componentProps
}

async function updateMap(data, VueInstance) {
  let mapGeoJsonData = data
  echarts.registerMap(VueInstance.options.geo[0].map, mapGeoJsonData);
  mapDataRender = mapGeoJsonData.features.map((item) => {
    return {
      value: (Math.random() * 1000).toFixed(2),
      name: item.properties.name,
    };
  });
  if (VueInstance) {
    VueInstance.options.series[0].data = mapDataRender
    VueInstance.updateOptions(VueInstance.options)
  }
}

// 组件创建前
async function defineComponentBeforeCreated({ VueElement }) {
  let mapUrl = BASE_URL + "/adminapp/public/assets/elfinder/files/json/geo/江苏省.json"
  let getMapJson = function () {
    return fetch(mapUrl).then(res => res.json())
  }
  mapGeoJson = await getMapJson()
  echarts.registerMap(VueElement ? VueElement.id : timeDate, mapGeoJson)
}

// 组件创建后
async function defineComponentCreated({ VueInstance, VueElement }) {
  if (VueElement && VueInstance) {
    newMapDate = VueElement.id
    if (newMapDate) {
      echarts.registerMap(newMapDate, mapGeoJson)
      VueInstance.options.geo[0].map = newMapDate
      VueInstance.options.series[3].map = newMapDate
    } else {
      echarts.registerMap(VueElement ? VueElement.id : timeDate, mapGeoJson)
    }
  }
  const myChart = VueInstance.getEChartInstance();
  timer = setInterval(() => {
    //数据情况重绘，清除formatter移动效果，也可根据自身需求是否需要，删除这两行代码
    /*option.series[seriesjson[runidx].createType-1].data = [];
      myChart.setOption(option, true);*/
    for (var i = 0; i < 3; i++) {
      VueInstance.options.series[i].data = [];
    }
    var cityIndex = Math.floor(Math.random() * 13);
    var runidx = Math.floor(Math.random() * 3);
    var coordCity = Object.keys(center)[cityIndex];
    var coord = center[coordCity];
    VueInstance.options.series[runidx].data = [
      {
        city: coordCity,
        value: coord,
      },
    ];
    // console.log(option.series[runidx].data)
    // console.log("---",VueInstance.options.series[4].data)
    // VueInstance.options.series[4].data = VueInstance.options.series[4].data.sort(function(a,b){
    //     return b.value-a.value;
    // });
    myChart.setOption(VueInstance.options, true);
  }, Math.floor(Math.random() * 10000) + 1000);

}

// 组件销毁
function defineComponentDestroy({ VueInstance }) {
  if (timer) {
    clearInterval(timer)
  }
}

async function handleDataCallback({
  ResourceData,
  VueInstance,
}) {
  VueInstance && updateMap(ResourceData, VueInstance)
}